<template>
    <div>
        <el-menu
            default-active="2"
            text-color="#fff"
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            :router="isRouter"
  
        >
        <mo-sub-m :menuTree="mData" ></mo-sub-m>

        </el-menu>

    </div>
</template>

<script lang="ts" >
import {defineComponent,PropType} from 'vue'
import moSubM from "./mo_subMenu.vue"
import {mtMenuUtil} from '@/moType'


export default defineComponent({
    name:'moMenuTree',
    components:{
        moSubM
    },
    props:{
        isCollapse:{
            type:Boolean,
            required: false,
            default: false
        },
        isRouter:{
            type:Boolean,
            required: false,
            default: true           
        },
        mData:{
            type: Array as PropType<mtMenuUtil[]>,
            required: false,
            default: () => []      
        }
    },
    methods:{
        handleOpen(key: string, keyPath: string[]){
            console.log(key, keyPath)
            },
        handleClose(key: string, keyPath: string[]){
            console.log(key, keyPath)
            }
    },
    setup(){

        
        return {

        }
    }
    
});


</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  height:100%;
}
</style>